<template>
  <div class="home">
    <header>
      <img src="@/assets/photo/music01.jpg" alt="">
      <div class="mask"></div>
      <h1>加入我们的社区，一起创造音乐梦想吧！</h1>
    </header>
    <main>
      <section :class="{hide1:Hide1}">
        <img class="phoneImg" src="@/assets/photo/HomeImg1.jpg" alt="曲库">
        <div class="article">
          <h1 id="sTitle1">曲库</h1>
          <p>为面向广大音乐群体而设计开发。</p><br>
          <p>功能主要是音乐搜索、音乐播放、音乐下载、评论、歌单整理。</p>
          <p>可以满足日常听歌的需求。</p>

          <div class="line"></div>    

          <h1 id="sTitle2">社区</h1>
          <p>主要面向音乐人/音乐深度爱好者。</p><br>
          <p>功能则类似微信朋友圈，通过发说说的方式分享心得；<br>
            或是发布音乐，并在音乐发布的同时发表一条音乐说说。</p>
        </div>
        <img class="phoneImg" src="@/assets/photo/HomeImg2.jpg" alt="社区">
      </section>
      <section>
        <div class="article">
          <div :class="{box:true,hideTopLeft:Hide2}">
          <h1>跨平台</h1>
          <img src="@/assets/photo/photo2-1.png" alt="跨平台">
          <article>
            <h2>网页端</h2>
            <p>网页端通过在浏览器输入网址访问</p>
            <br>
            <h2>小程序端</h2>
            <p>小程序端通过搜索小程序名字，从搜索结果中选择小程序并打开，如微信小程序</p>
            <br>
            <h2>移动端</h2>
            <p>移动端通过官网下载APP，并安装APP使用</p>
          </article>
          </div>

          <div :class="{box:true,hideTopRight:Hide2}">
            <h1>多系统</h1>
            <img src="@/assets/photo/photo2-2.png" alt="多系统">
            <article>
              <h2>本地系统</h2>
              <p>本地系统负责音乐社区的管理维护、原创音乐上传发布功能的实现以及支撑官网搭建</p>
              <br>
              <h2>网易云代理系统</h2>
              <p>网易云系统通过网易云音乐API实现音乐搜索、音乐播放和歌单推荐等功能，是该APP的主要资源支撑。</p>
            </article>
          </div>

        </div>
        
      </section>
      
    </main>
    <footer>
        <div class="mask"></div>
        <div class="link">
          <h1>了解我(DengZhou) :</h1>
          <a id="gitEE" href="https://gitee.com/dengzhou125"></a>
          <a id="github" href="https://github.com/Joe-Deng"></a>
          <a id="csdn" href="https://blog.csdn.net/weixin_51116314"></a>
        </div>
    </footer>
  </div>
</template>

<script>



export default {
  name: 'Home',
  components: {
    
  },
  data() {
    return {
      Hide1:true,
      Hide2:true
    }
  },
  methods: {
    click(){
      console.log("显示了")
      this.Hide1=false;
    },
    showSections(item,key){
      let distance = window.scrollY-item.offsetTop;
      if(distance>0){
        console.log(this[key])
        this[key] = false;
      }
      // console.log(distance)
      // console.log("---"+item.offsetHeight)
      if(distance>item.clientHeight*0.7 || distance<0){
        this[key] = true;
      }
      
    },
    throttle(fn,delay){
      //节流
      let timer;
      let _this = this
      // console.log(arguments)
      return function(){
        if(timer){
          return;
        }
        let args = arguments;
        // console.log(args);
        timer = setTimeout(function(){
          fn.apply(_this,args)
          timer = null;
        },delay)
      }
    }
  },
  mounted() {
    document.querySelectorAll('section').forEach((item,index)=>{
      console.log("加了一个")
      let key = "Hide"+parseInt(index+1)
      let _this = this;
      let throttleShow = this.throttle(this.showSections,200);
      //注意这里是为全局添加的scroll监听，并且该页面暂时保持keep-alive，所以这个函数会不断执行！
      window.addEventListener("scroll",()=>throttleShow(item,key))
    })
  },
}
</script>
<style lang="scss" scoped>
  header{
    width: 100%;
    height: 300px;
    // background: url($background-img01) no-repeat;
    position: relative;

    img{
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #00000088;
    }

    h1{
      position: relative;
      color: $color-text;
      font-size: $font-size-xxl;
      top: 100px;
    }
  }

  main{
    width: 100%;
    position: relative;
    background-color: #00000055;
    
    section{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 0px;
      overflow: hidden;
      transition: 1s ease-out;

      &:nth-child(odd){
        background-color: $color-background1;

        .phoneImg{
          width: 301px;
          height: 653px;
        }
        .article{
          width: 600px;
          height: 650px;
          margin: 0 80px;
          background: $color-background-light;
          border-radius: 30px;
          padding: 40px 80px;
          position: relative;
  
            h1{
              color: $color-text-dark;
              font-size: $font-size-xxxl;
              position: absolute;
              width: 10px;
              font-weight: bold;
            }
  
            #sTitle1{
              top: 100px;
              left: 60px;
            }
  
            #sTitle2{
              bottom: 120px;
              right: 80px;
            }
  
            p{
              color: $color-text-fade3;
              font-size: $font-size-m;
              margin:0px 70px;
              text-align: left;
        
            }
            .line{
              background: $color-text-fade;
              width: 86%;
              height: 10px;
              margin: 60px auto;
            }
        }

        

      }

      &:nth-child(even){
        background-color: $color-background-dark;

        .article{
          width: 100%;
          height: 650px;
          margin: 0 80px;
          // background: $color-background-light;
          border-radius: 30px;
          // padding: 40px 80px;
          position: relative;
          display: flex;
          justify-content: center;
          align-content: center;
  
            h1{
              color: $color-text-dark;
              font-size: $font-size-xxxl;
              width: $font-size-xxxl;
              
              margin: 0 50px;
              

              font-weight: bold;
            }
  
  
            p{
              color: $color-text-fade3;
              font-size: $font-size-l;
              margin:10px 70px;
              
            }
        }
      }

      .box{
          height: 600px;
          width: 137px;
          background-color: $color-background-light;
          overflow: hidden;
          margin: 0px 30px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-radius: 30px;
          transition: 1s ease-out;

          &:hover{
            width: 1515px;
          }

          img{
            height: 70%;
          }

          article{
            width: 50%;
            margin: 0 40px;

            h2{
              margin-top: 20px;
              font-size: $font-size-xxxl;
            }

            p{
              font-size: $font-size-l;
            }
          }
        }

        .hideTopLeft{
          transform: translate(-1000px,-1000px);
          opacity: 0;
        }
        .hideTopRight{
          transform: translate(1000px,-1000px);
          opacity: 0;
        }
    }

    .hide1{
      background-color: #000;
      opacity: 0;
    }
  }


  footer{
      position: relative;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 160px;
      display: flex;
      align-items: center;
      

      .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #00000088;
      }

      .link{
        display: flex;
        align-content: center;
        justify-content: flex-end;
        position: absolute;
        right: 0px;
        bottom: 60px;

        h1{
          font-size: $font-size-m;
          color: $color-text;
          font-weight: bold;
          margin: -2px 10px 0 0;
        }

        a{
        height: 26px;
        text-decoration: none;
        background-size:contain;
        margin: 0px 20px;
        background-image: url($logo-link);
        background-repeat: no-repeat;
        background-size: cover;
        }

        #gitEE{
          width: 80px;
          background-position-x: 0px;
        }

        #github{
          width: 97px;
          background-position-x: -80px;
        }

        #csdn{
          width: 86px;
          background-position-x: -177px;
        }
      }
    }
</style>